<template>
    <div>
        <Return>
            收货人信息
        </Return>
        <div class="word">收货人姓名
            <input type="text">
        </div>
        <div class="word">收货人手机
            <input type="text">
        </div>
        <div class="word">省市区/县
            <van-field
            v-model="fieldValue"
            is-link
            readonly
            label="地区"
            placeholder="请选择所在地区"
            @click="show = true"
            />
            <van-popup v-model="show" round position="bottom">
            <van-cascader
                v-model="cascaderValue"
                title="请选择所在地区"
                :options="options"
                @close="show = false"
                @change="onChange"
                @finish="onFinish"
            />
            </van-popup>
        </div>
        <div class="word address">详细地址
            <input type="text">
        </div>
        <button>确认保存</button>
    </div>
</template>

<script>
    import Vue from 'vue';
    import { Cascader } from 'vant';
    Vue.use(Cascader);
    export default {
        data() {
            return {
            show: false,
            fieldValue: '',
            cascaderValue: '',
            options: [
                {
                text: '浙江省',
                value: '330000',
                children: [],
                },
            ],
            };
        },
        methods: {
            onChange({ value }) {
            if (value === this.options[0].value) {
                setTimeout(() => {
                this.options[0].children = [
                    { text: '杭州市', value: '330100' },
                    { text: '宁波市', value: '330200' },
                ];
                }, 500);
            }
            },
            onFinish({ selectedOptions }) {
            this.show = false;
            this.fieldValue = selectedOptions.map((option) => option.text).join('/');
            },
        },
    };
</script>

<style scoped>
input{
    border: 0;
    margin-left: 2vw;
}
.word{
    border-bottom: 1px solid rgba(231, 231, 231, 1);
    font-size: 12px;
	line-height: 5vh;
	text-align: left;
    text-indent: 1em;
}
.address{
    height: 15vh;
}
button{
    width: 80vw;
    height: 5vh;
    background: rgba(255, 87, 51, 1);
    border: 0;
    display: block;
    margin: 0 auto;
    border-radius: 23px;
    color: #fff;
    font-size: 14px;
    margin-top: 5vh;
}
</style>